<template>
	<view class="content">
		<!-- <image class="logo" src="/static/logo.png"></image>
		<view class="text-area">
			<text class="title">{{title}}</text>
				</view> -->
					<view class="uni-list">
						<view class="uni-list-cell" hover-class='uni-list-cell-hover' v-for="(item,index) in news"
						:key="index" @click="openinfo" :data-newsid="item.post_id">
					<view class="uni-media-list">
						 <image class="uni-media-list-logo" :src="item.author_avatar"></image>
						<view class="uni-media-list-body">
						<view class="uni-media-list-text-top">{{item.title}}</view>
						<view class="uni-media-list-text-bottom uni-ellipsis">{{item.created_at}}</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				news:[]
			}
		},
		 onLoad: function(){
		      uni.showLoading({
		        title: '加载中...'
		      })
		      uni.request({
		        url: 'http://unidemo.dcloud.net.cn/api/news',
		        method: 'GET',
		        data: {},
		        success: res => {
		          this.news = res.data;  
		          uni.hideLoading();
		        },
		        fail: () => {},
		        complete: () => {}
		      })
		    },
		    methods: {
		      openInfo(e) {  
		        console.log(e);
				var newsid = e.currentTarget.dataset.newsid;
		        uni.navigateTo({  
		          url: '../detail/detail?newsid=' + newsid
		        })
		      }
		    }
		  }
</script>

<style>
	   .content {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
  } 
  .uni-media-list-body {
    height: auto;
  }
  .uni-media-list-text-top {
    line-height: 1.6em;
  }
  .uni-list-cell {
    padding: 20rpx;
    border-bottom: 1rpx solid #eee;
  }
  .uni-media-list {
    display: flex;
    align-items: center;
  }
  .uni-media-list-logo {
    width: 80rpx;
    height: 80rpx;
    margin-right: 20rpx;
    border-radius: 50%;
  }
  .uni-ellipsis {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
</style>
